<template>
  <div class="about">
    <!-- 个人简介模块 -->
    <el-card class="personal-intro" style="margin-bottom: 20px;">
      <template #header>
        <div class="intro-header">
          <span>个人简介</span>
        </div>
      </template>
      <div v-if="!isEditing" class="intro-content">
        <p>{{ introContent }}</p>
        <el-button type="text" @click="toggleEdit">编辑</el-button>
      </div>
      <div v-else class="edit-mode">
        <el-input
          type="textarea"
          :rows="4"
          v-model="introContent"
          placeholder="请输入个人简介"
        ></el-input>
        <el-button type="primary" @click="saveEdit">保存</el-button>
        <el-button @click="cancelEdit">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AboutView',
  data () {
    return {
      msg: 'Hello Vue 3 + Vite',
      isEditing: false, // 控制是否处于编辑模式
      introContent: '此人很懒，什么都没有写' // 个人简介内容
    }
  },
  methods: {
    toggleEdit() {
      this.isEditing = true; // 切换到编辑模式
    },
    saveEdit() {
      this.isEditing = false; // 保存后退出编辑模式
    },
    cancelEdit() {
      this.introContent = '此人很懒，什么都没有写'; // 取消编辑并恢复默认内容
      this.isEditing = false;
    }
  }
}
</script>

<style scoped>
/* 个人简介样式 */
.intro-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.intro-content {
  text-align: left;
  line-height: 1.6;
}

.edit-mode {
  margin-top: 10px;
}

.el-button {
  margin-right: 10px;
}
</style>